<template>
    <div>
        <input type="text" v-model='name'>
        <aaa ref='aa'></aaa>
        <button @click='fn'>按钮</button>

        <bbb :name='name' qqq=123 :www='name' @q1='f1' @q2='f2'></bbb>
    </div>
</template>
<script>
// @ is an alias to /src
import aaa from './a';
import bbb from './b';
/* 
  子父组件的数据交互方式：
  1、自定义属性+props 和  自定义事件+$emit

  2、$parent+$children或者 通过ref获取组件

  3、$attrs接收的是父组件通过行内属性传给子组件的没有被props接收的哪些属性 没有响应式
     $liteners接收的都是 父组件传进来的自定义事件

  4、eventBus  创造一个空的vue实例 然后通过$on  $emit $off 来去实现组件之间的数据交互

  5、provide/inject 使用在高阶组件或者插件； 数据不可响应

  6、vuex 是最常用的兄弟组件交互方式



*/
export default {
    name: 'XXX',
    data() {
        return {
          name:'珠峰'
        }
    },
    provide(){
      return {
        theme:123
      }
    },
    methods: {
      fn(){
        console.log(this.$refs.aa)
        this.$refs.aa.qqq()
      },
      f1(){},
      f2(){}
    },
    components: {
        aaa,bbb
    }
}
</script>
<style lang="less">

</style>